<!doctype html>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta
      name="viewport"
      content="width=device-width,user-scalable=0,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0"
    />
    <link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet" />
    <title>Contact</title>
    <style>
      body {
        margin: 10px 0.4rem;
        font-size: 15px;
        line-height: 22px;
        font-family:
          Helvetica,
          sans-serif,
          Microsoft Yahei,
          Arial,
          Lucida,
          Verdana;
        word-wrap: break-word;
      }

      a {
        color: #409eff;
        font-weight: bolder;
        text-decoration: none;
      }

      p {
        font-size: 0.28rem;
        font-family: Roboto, Roboto;
        font-weight: 400;
        color: #191919;
        line-height: 0.44rem;
      }

      h1 {
        text-align: center;
        margin: 0.56rem 0 0.4rem;
        font-size: 0.56rem;
        font-family: Roboto, Roboto;
        font-weight: 900;
        color: #4949ff;
        line-height: 0.66rem;
      }

      .bg {
        margin: auto;
        width: 6.4rem;
        height: 4.66rem;
        background: #4949ff;
        border-radius: 0.2rem;
      }

      .h2 {
        text-align: center;
        padding: 0.48rem 0;
        font-size: 0.36rem;
        font-family: Roboto, Roboto;
        font-weight: 900;
        color: #ffffff;
        line-height: 0.42rem;
      }

      .p {
        margin: auto;
        display: flex;
        align-items: center;
        width: 5.76rem;
        font-size: 0.28rem;
        font-family: Roboto, Roboto;
        font-weight: 400;
        color: #ffffff;
        line-height: 0.33rem;
        margin-bottom: 0.4rem;
      }

      span {
        display: inline-block;
        width: 0.14rem;
        height: 0.14rem;
        background: #ffffff;
        border-radius: 0.7rem;
        margin-right: 0.24rem;
      }

      .btn {
        margin: auto;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 5.76rem;
        height: 0.68rem;
        background: #ffffff;
        border-radius: 0.12rem;
        font-size: 0.28rem;
        font-family: Roboto, Roboto;
        font-weight: 900;
        color: #4949ff;
        line-height: 0.36rem;
      }
    </style>
    <script>
      (function (window, html) {
        // 规定默认的设计稿宽度720px
        const designWidth = 720;
        function recalc() {
          const windowWidth = html.clientWidth < designWidth ? html.clientWidth : designWidth;
          // *100 之后，则样式中rem的值就需要相应的缩小100倍
          // 即：设计稿中的20px，在样式中就要写成0.2rem
          const fontSize = (windowWidth / designWidth) * 100;
          setFontSize(fontSize);
        }
        function setFontSize(fontSize) {
          html.style.fontSize = `${fontSize}px`;
        }
        // 监听resize
        window.addEventListener('resize', recalc);
        recalc();
      })(window, document.documentElement);

      function getTopLevelDomain(url = window.location.href) {
        let hostname = new URL(url).hostname;
        let parts = hostname.split('.');
        if (parts.length > 2) {
          console.log(parts.slice(-2).join('.'));
          return parts.slice(-2).join('.');
        } else {
          console.log(hostname);
          return hostname;
        }
      }
    </script>
  </head>

  <body>
    <h1>About Us</h1>
    <div class="bg">
      <div class="h2">Get in touch</div>
      <div class="p"><span></span>Have a question about game?</div>
      <div class="p"><span></span>We'd love to hear from you!</div>
      <div class="p"><span></span>Send us a message and we'll get back</div>
      <div class="btn">Send</div>
    </div>

    <div style="font-size: 13px; margin-top: 30px; color: #666; display: none" id="address">
      MXMA Technology Limited FLAT/RM B3, 19/F TUNG LEE COMM BLDG 91-97 JERVOIS ST SHEUNG WAN HONG
      KONG
      <script>
        const addressBox = document.getElementById('address');
        if (location.host === 'puzzle-game.pro') {
          addressBox.style.display = 'block';
        } else {
          addressBox.remove();
        }
      </script>
    </div>

    <script>
      const sendButton = document.querySelector('.btn');
      const emailAddress = 'dongtaozhang0@gmail.com';
      sendButton.innerText = `Send to "${emailAddress}"`;

      sendButton.addEventListener('click', sendEmail);
      function sendEmail() {
        const mailtoLink = `mailto:${emailAddress}`;
        window.location.href = mailtoLink;
      }
    </script>
  </body>
</html>
